<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="清退规则列表"
    width="1200"
    draggable
    @close="close"
    :z-index="2000"
  >
    <el-button class="my-2" type="primary" @click="handeleAdd">新增清退规则</el-button>

    <el-table :data="tableData" border style="width: 100%" height="500">
      <el-table-column prop="name" label="清退规则名称" width="200" />
      <el-table-column prop="type_text" label="统计时间" width="180" />
      <el-table-column prop="category" label="商品分类" width="200" />
      <el-table-column prop="name" label="平台/站点" width="180">
        <template #default="{ row }"> {{ row.platforms }} /{{ row.site }} </template>
      </el-table-column>
      <el-table-column prop="sales_volume" label="销量" />
      <el-table-column prop="inventory" label="库存" />
      <el-table-column label="操作" width="110">
        <template #default="{ row, $index }">
          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" link @click="handleDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  <ruleForm ref="ruleFormRef" @query="queryList"></ruleForm>
</template>
<script setup name="ComModal">
import { reactive, toRefs, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { getClearrulesList, deleteClearrules } from "../api";
import ruleForm from "./RuleForm.vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["query"]);

const data = reactive({
  tableData: [],
  visible: false,
  load: false,
});
const { tableData, visible, load } = toRefs(data);
const open = async () => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  queryList();
  visible.value = true;
};
const queryList = () => {
  getClearrulesList({
    status: 0,
  }).then((res) => {
    tableData.value = res.data;
  });
};

const ruleFormRef = ref();

const handeleAdd = () => {
  ruleFormRef.value.open("add");
};

const handleEdit = (row) => {
  ruleFormRef.value.open("edit", row.id);
};

const handleDelete = async (id) => {
  try {
    const res = await deleteClearrules({
      id,
    });
    ElMessage.success("操作成功");
    queryList();
  } catch (e) {}
};

onMounted(() => {});
const close = () => {
  visible.value = false;
};
defineExpose({ open });
</script>
